<template>
<div class="container">
  <div data-reactroot="">
    <header class="common-header"><i class="left iconfont" @click="back()">&lt;</i>
      <h1 class="center">注册</h1>
      <div class="right"></div>
    </header>
    <div class="registerForm">
      <div class="bg-white">
        <div class="inputitem"><label for="phone">手机号</label><input type="tel" name="phone" placeholder="请输入您常用的手机号" pattern="[0-9]*"><button class="identifiedCodeBtn">发送验证码</button></div>
        <div class="inputitem"><label for="code">验证码</label><input type="text" name="code" placeholder="请输入您收到的验证码"></div>
        <div class="inputitem"><label for="username">昵 称</label><input type="text" name="username" placeholder="取一个响亮的昵称吧" v-model="username"></div>
        <div class="inputitem"><label for="pwd">密码</label><input type="password" name="pwd" placeholder="6-32位字母数字组合" v-model="pwd"></div>
      </div>
      <div class="btnBox"><button class="btn huge transition" @click="register()">注册</button></div>
      <div class="registerForm-protocol"><input type="checkbox"  id="mainColor" checked /><span><!-- react-text: 531 -->我已阅读并同意<!-- /react-text --><a class="" href="http://www.dolapocket.com/agreement/agreement.html">《用户协议》</a></span></div>
      <i style="font-size:10px">暂无手机注册功能，请在昵称处写手机号，再输入密码注册，上面空着</i>
    </div>
  </div>
</div>
</template>

<script>
import axios from "axios"
export default {
  name: "Register",
  data() {
    return {
      username: "",
      pwd: ""
    }
  },
  methods: {
    back(){
      window.history.go(-1);
    },
    register() {
      axios.post("/api/register",{
          username : this.username,
          pwd      : this.pwd
        })
      .then((res)=>{
        if(res.data.code){
          this.$router.history.push("/mine")
        }else{
            alert(res.data.message);
        }
      })
  }

  }
}
</script>

<style scoped>
.container {
    font-size: 28px;
    max-width: 10rem;
    margin: 0 auto;
}
.common-header {
    display: flex;
    height: 44px;
    line-height: 44px;
    background-color: #07b3ef;
    color: #fff;
}
.common-header .left {
    font-size: 20px;
    padding-left: 0.1rem;
}
.common-header .center {
    flex-grow: 1;
    text-align: center;
    font-size: 20px;
}
.common-header .right.word {
    font-size: 20px;
    color: white
}
.bg-white {
    background-color: #fff;
    font-size: 14px;
}
.inputitem {
    display: flex;
    height: 0.4rem;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    margin-left: 0.1rem;
    padding-right: 0.1rem;
}
.inputitem label {
    width: 0.6rem;
}
.inputitem input {
    flex-grow: 1;
}
button, input, select, textarea {
    outline: none;
    border: none;
}
.inputitem:not(:first-child) {
    border-top: 1px solid #ddd;
}
.btn, .btnBox {
    text-align: center;

}

.btnBox {
    margin-top: 0.22rem;

}
.btn.huge {
    font-size: 14px;
    color: white;
    background: #07b3ef;
}
/* .btn.disabled {
    background-color: #ddd;

} */
.btn.huge {
    width: 2.6rem;
    height: 0.4rem;
    line-height: 0.4rem;
    font-size: 18px;
}
.registerForm-protocol span{
  font-size: 14px;
}
#mainColor{
  width: 14px;
  height: 14px;
  border: 1px solid #999;
  margin: auto 6px;
}
</style>
